<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">Spinner</h1>
        <div class="entry">
            <p>Spinner is used to provide an input with increment and decrement buttons on an input text.</p>

            <h:form>

                <p:panel header="Spinners">
                    <h:panelGrid id="grid" columns="2" cellpadding="5">
                        <h:outputLabel for="spinnerBasic" value="Basic Spinner: " />
                        <p:spinner id="spinnerBasic" value="#{spinnerController.number1}"/>

                        <h:outputLabel for="spinnerStep" value="Step Factor: " />
                        <p:spinner id="spinnerStep" value="#{spinnerController.number2}" stepFactor="0.25"/>

                        <h:outputLabel for="minmax" value="Min/Max: " />
                        <p:spinner id="minmax" value="#{spinnerController.number3}" min="0" max="100"/>

                        <h:outputLabel for="prefix" value="Prefix: " />
                        <p:spinner id="prefix" value="#{spinnerController.number4}" prefix="$" min="0" />

                        <h:outputLabel for="ajaxspinner" value="Ajax Spinner: " />
                        <p:outputPanel>
                            <p:spinner id="ajaxspinner" value="#{spinnerController.number5}">
                                <p:ajax update="ajaxspinnervalue" process="@this" />
                            </p:spinner>
                            <h:outputText id="ajaxspinnervalue" value="#{spinnerController.number5}" style="padding-left:10px"/>
                        </p:outputPanel>

                    </h:panelGrid>
                </p:panel>

                <br />
                <p:commandButton value="Submit" update="display" oncomplete="dialog.show()" />

                <p:dialog header="Values" widgetVar="dialog" showEffect="fold" hideEffect="fold">
                    <h:panelGrid id="display" columns="2" cellpadding="5">
                        <h:outputText value="Value 1: " />
                        <h:outputText value="#{spinnerController.number1}" />

                        <h:outputText value="Value 2: " />
                        <h:outputText value="#{spinnerController.number2}" />

                        <h:outputText value="Value 3: " />
                        <h:outputText value="#{spinnerController.number3}" />

                        <h:outputText value="Value 4: " />
                        <h:outputText value="#{spinnerController.number4}" />

                        <h:outputText value="Value 5: " />
                        <h:outputText value="#{spinnerController.number5}" />
                    </h:panelGrid>
                </p:dialog>

            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="spinner.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;
       
   	&lt;p:panel header="Spinners"&gt;
   		&lt;h:panelGrid id="grid" columns="2" cellpadding="5"&gt;
    		&lt;h:outputLabel for="spinnerBasic" value="Basic Spinner: " /&gt;
    		&lt;p:spinner id="spinnerBasic" 
    				value="\#{spinnerController.number1}"/&gt;
    		
    		&lt;h:outputLabel for="spinnerStep" value="Step Factor: " /&gt;
    		&lt;p:spinner id="spinnerStep" 
    				value="\#{spinnerController.number2}" stepFactor="0.25"/&gt;
    		
    		&lt;h:outputLabel for="minmax" value="Min/Max: " /&gt;
    		&lt;p:spinner id="minmax" 
    				value="\#{spinnerController.number3}" min="0" max="100"/&gt;
    		
    		&lt;h:outputLabel for="prefix" value="Prefix: " /&gt;
    		&lt;p:spinner id="prefix" value="#{spinnerController.number4}" prefix="$" min="0" /&gt;

            &lt;h:outputLabel for="ajaxspinner" value="Ajax Spinner: " /&gt;
            &lt;p:outputPanel&gt;
                &lt;p:spinner id="ajaxspinner" value="\#{spinnerController.number6}"&gt;
                    &lt;p:ajax update="ajaxspinnervalue" process="@this" /&gt;
                &lt;/p:spinner&gt;
                &lt;h:outputText id="ajaxspinnervalue"
                        value="\#{spinnerController.number5}"/&gt;
            &lt;/p:outputPanel&gt;

    
   		&lt;/h:panelGrid&gt;
   	&lt;/p:panel&gt;
            	
	&lt;p:commandButton value="Submit" update="display" oncomplete="dialog.show()" /&gt;
	
	&lt;p:dialog header="Values" widgetVar="dialog" showEffect="fold" hideEffect="fold"&gt;
		&lt;h:panelGrid id="display" columns="2" cellpadding="5"&gt;
			&lt;h:outputText value="Value 1: " /&gt;
			&lt;h:outputText value="\#{spinnerController.number1}" /&gt; 
			
			&lt;h:outputText value="Value 2: " /&gt;
			&lt;h:outputText value="\#{spinnerController.number2}" /&gt; 
			
			&lt;h:outputText value="Value 3: " /&gt;
			&lt;h:outputText value="\#{spinnerController.number3}" /&gt; 
			
			&lt;h:outputText value="Value 4: " /&gt;
			&lt;h:outputText value="\#{spinnerController.number4}" /&gt; 
			
			&lt;h:outputText value="Value 5: " /&gt;
			&lt;h:outputText value="\#{spinnerController.number5}" /&gt; 
		&lt;/h:panelGrid&gt;
     &lt;/p:dialog&gt;
            	
&lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="SpinnerController.java">
                    <pre name="code" class="java">
public class SpinnerController {

	private int number1;
	
	private double number2;
	
	private int number3;
	
	private int number4;
	
	private int number5;
	
	private int number6;

    private int number7;

	public int getNumber1() {
		return number1;
	}
	
	public void setNumber1(int number1) {
		this.number1 = number1;
	}
	
	public double getNumber2() {
		return number2;
	}

	public void setNumber2(double number2) {
		this.number2 = number2;
	}
	
	public int getNumber3() {
		return number3;
	}

	public void setNumber3(int number3) {
		this.number3 = number3;
	}

	public int getNumber4() {
		return number4;
	}

	public void setNumber4(int number4) {
		this.number4 = number4;
	}

	public int getNumber5() {
		return number5;
	}

	public void setNumber5(int number5) {
		this.number5 = number5;
	}
	
	public int getNumber6() {
		return number6;
	}

	public void setNumber6(int number6) {
		this.number6 = number6;
	}

    public int getNumber7() {
        return number7;
    }

    public void setNumber7(int number7) {
        this.number7 = number7;
    }
}
                    </pre>
                </p:tab>
            </p:tabView>



        </div>

    </ui:define>
</ui:composition>